/*
 * @Description: 密码输入区域组件
 * @Author: zhenqiang.hong
 * @Date: 2019-12-05 15:33:00
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2019-12-23 11:32:29
 */
<template>
  <div class="flex-h flex-vc password-wapper">
    <!-- <i class="icon iconfont icon-password fontsize48"></i> -->
    <img
      class="img-password"
      src="../assets/login-password.png"
    />
    <input
      :type="isShowPassword?'text':'password'"
      class="input-cmomon fontsize32 flex1 input-password"
      v-model="password"
      :placeholder="isPlaceholdertLength?'请输入密码（6-20位）':'请输入密码'"
    />
    <i
      v-show="password?true:false"
      class="icon iconfont icon-cancel-o fontsize40"
      @click="clearPassword()"
    ></i>
    <i
      v-show="isShowPwdIcon"
      class="icon iconfont icon-eye fontsize56"
      :class="isShowPassword?'eye-show':''"
      @click="isShowPassword=!isShowPassword"
    ></i>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    // 密码
    value: {
      type: String,
      default: ''
    },
    // 密码眼睛图标是否展示
    isShowPwdIcon: {
      type: Boolean,
      default: false
    },
    // 密码placeholder是否有长度提示
    isPlaceholdertLength: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      password: this.value,
      isShowPassword: false// 是否明文展示密码
    }
  },
  watch: {
    value(val) { // 监听父组件传递数据，更新内部值
      this.password = val
    }
  },
  mounted() {
    // if (sessionStorage.getItem('password')) {
    //   this.password = sessionStorage.getItem('password')
    //   sessionStorage.removeItem('password')
    // }
  },
  methods: {
    changeValue(e) {
      // 给input元素的 input 事件绑定一个方法 changeValue
      // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
      this.$emit('input', e.target.value)
    },
    clearPassword() { // 清空输入框
      this.password = ''
      // this.$emit('clearPassword')
    }
  }
}
</script>

<style scoped>
/* 输入区包裹层  */
.password-wapper {
  width: 690px;
  height: 112px;
  border-bottom: 1px solid #f2f5f6; /*no*/
  margin-top: 32px;
}
/* 默认输入框样式 */
.input-cmomon {
  font-weight: 400;
  color: #333;
  height: 45px;
  line-height: 45px;
  margin: 0 26px;
  border: none;
}
/* 密码图标 */
/* .icon-password {
  color: #333;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
} */
.img-password {
  width: 60px;
  height: 60px;
}
/* 清空、眼睛图标样式 */
.icon-cancel-o,
.icon-eye {
  color: #ccc;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.eye-show {
  /* color: #1dc994; */
  color: #28acff;
}
</style>
